<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课堂分享 - {{ user_info.name }}</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

        :root {
            --primary-color: #007bff;
            --teacher-color: #28a745;
            --background-color: #f4f7f6;
            --panel-bg-color: #ffffff;
            --text-color: #333;
            --border-color: #e0e0e0;
            --header-bg: #f8f9fa;
            --self-message-bg: #007bff;
            --other-message-bg: #e9ecef;
            --system-message-color: #6c757d;
        }

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            margin: 0;
            height: 100vh;
            overflow: hidden;
        }

        .main-container {
            display: flex;
            height: 100%;
            width: 100%;
        }

        .panel {
            display: flex;
            flex-direction: column;
            background-color: var(--panel-bg-color);
            margin: 10px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .file-panel {
            flex: 2;
        }

        .chat-panel {
            flex: 1;
            min-width: 320px;
        }

        .panel-header {
            padding: 15px 20px;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--header-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .panel-header h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 500;
        }

        .logout-btn {
            font-size: 14px;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            padding: 5px 10px;
            border-radius: 5px;
            transition: background-color 0.2s;
        }

        .logout-btn:hover {
            background-color: #e9ecef;
        }

        .panel-content {
            padding: 10px;
            overflow-y: auto;
            flex-grow: 1;
        }

        /* --- File List Styles --- */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }

        th {
            font-weight: 500;
            font-size: 14px;
            color: #666;
        }

        td {
            font-size: 15px;
        }

        tr:last-child td {
            border-bottom: none;
        }

        tr:hover {
            background-color: #f8f9fa;
        }

        td a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
        }

        td a:hover {
            text-decoration: underline;
        }

        /* --- Chat Panel Styles --- */
        #user-list-container {
            padding: 10px 20px;
            border-bottom: 1px solid var(--border-color);
        }

        #user-list-container h3 {
            margin: 0 0 8px 0;
            font-size: 14px;
            font-weight: 500;
            color: #555;
        }

        #user-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .user-tag {
            background-color: #f1f1f1;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 13px;
        }

        .user-tag.teacher {
            background-color: var(--teacher-color);
            color: white;
            font-weight: 500;
        }

        #chat-box {
            padding: 15px;
        }

        .message {
            margin-bottom: 12px;
            max-width: 85%;
            line-height: 1.5;
        }

        .message-content {
            padding: 8px 12px;
            border-radius: 18px;
            display: inline-block;
        }

        .message.other {
            float: left;
            clear: both;
        }

        .message.other .message-content {
            background-color: var(--other-message-bg);
            color: var(--text-color);
            border-bottom-left-radius: 4px;
        }

        .message.self {
            float: right;
            clear: both;
        }

        .message.self .message-content {
            background-color: var(--self-message-bg);
            color: white;
            border-bottom-right-radius: 4px;
        }

        .message.teacher .message-content {
            background-color: var(--teacher-color);
        }

        .sender-info {
            font-size: 12px;
            color: #888;
            margin: 0 5px 4px;
        }

        .message.self .sender-info {
            text-align: right;
        }

        .message.system {
            text-align: center;
            color: var(--system-message-color);
            font-size: 12px;
            width: 100%;
            clear: both;
        }

        .chat-input {
            padding: 15px;
            border-top: 1px solid var(--border-color);
        }

        #message-form {
            display: flex;
        }

        #message-text {
            flex-grow: 1;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 10px 15px;
            font-size: 15px;
            font-family: inherit;
        }

        #message-text:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        #message-form button {
            margin-left: 10px;
            padding: 10px 20px;
            border: none;
            background-color: var(--primary-color);
            color: white;
            border-radius: 20px;
            cursor: pointer;
            font-size: 15px;
            font-family: inherit;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
            }

            .panel {
                margin: 5px;
            }

            .chat-panel {
                min-width: unset;
            }
        }
    </style>
</head>
<body>
<div class="main-container">
    <div class="panel file-panel">
        <div class="panel-header">
            <h2><a href="/app" style="color:inherit;text-decoration:none;">📚 文件列表</a></h2>
            <a href="/logout" class="logout-btn">退出登录</a>
        </div>
        <div class="panel-content">
            <table>
                <thead>
                <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>修改时间</th>
                </tr>
                </thead>
                <tbody>
                {% if files %}
                {% for file in files %}
                <tr>
                    <td><a href="/download/{{ file.name }}" target="_blank">{{ file.name }}</a></td>
                    <td>{{ file.size }}</td>
                    <td>{{ file.modified_time }}</td>
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                    <td colspan="3" style="text-align: center; padding: 30px; color: #888;">"shared_files"
                        文件夹中暂无文件
                    </td>
                </tr>
                {% endif %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel chat-panel">
        <div class="panel-header">
            <h2>💬 课堂交流区</h2>
        </div>
        <div id="user-list-container">
            <h3>在线成员</h3>
            <div id="user-list"></div>
        </div>
        <div class="panel-content" id="chat-box">
        </div>
        <div class="chat-input">
            <form id="message-form" action="">
                <input id="message-text" autocomplete="off" placeholder="输入消息..."/>
                <button>发送</button>
            </form>
        </div>
    </div>
</div>

<script>
    const userInfo = {{ user_info | tojson }};
    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const ws = new WebSocket(`${wsProtocol}//${window.location.host}/ws`);

    const chatBox = document.getElementById('chat-box');
    const messageForm = document.getElementById('message-form');
    const messageInput = document.getElementById('message-text');
    const userListDiv = document.getElementById('user-list');

    function scrollToBottom() {
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    function appendChatMessage(data) {
        const messageElement = document.createElement('div');

        const isSelf = data.sender === userInfo.name;
        const isTeacher = data.role === 'teacher';

        let messageClass = 'message';
        if (isSelf) messageClass += ' self';
        else messageClass += ' other';
        if (isTeacher) messageClass += ' teacher';

        messageElement.className = messageClass;

        const content = `
                <div class="sender-info">${data.sender} <span class="timestamp">${data.timestamp}</span></div>
                <div class="message-content">${data.message}</div>
            `;
        messageElement.innerHTML = content;
        chatBox.appendChild(messageElement);
    }

    function appendSystemMessage(data) {
        const messageElement = document.createElement('div');
        messageElement.className = 'message system';
        messageElement.textContent = `--- ${data.message} ---`;
        chatBox.appendChild(messageElement);
    }

    function updateUserList(users) {
        userListDiv.innerHTML = '';
        users.forEach(user => {
            const userTag = document.createElement('span');
            userTag.className = 'user-tag';
            if (user.role === 'teacher') {
                userTag.classList.add('teacher');
            }
            userTag.textContent = user.name;
            userListDiv.appendChild(userTag);
        });
    }

        ws.onmessage = function(event) {
            const data = JSON.parse(event.data);
            switch (data.type) {
                // FIX V2.5: Handle incoming history block
                case 'history':
                    // Clear chat box before loading history to prevent duplicates on refresh
                    chatBox.innerHTML = '';
                    data.data.forEach(appendChatMessage);
                    appendSystemMessage({ message: "以上是历史消息" });
                    break;
                case 'chat':
                    appendChatMessage(data);
                    break;
                case 'system':
                    appendSystemMessage(data);
                    break;
                case 'user_list':
                    updateUserList(data.data);
                    break;
            }
            scrollToBottom();
        };

    ws.onopen = function () {
        appendSystemMessage({message: "已连接到课堂交流区"});
    };

    ws.onclose = function () {
        appendSystemMessage({message: "连接已断开，请刷新页面重试"});
    };

    ws.onerror = function () {
        appendSystemMessage({message: "连接发生错误"});
    };

    messageForm.addEventListener('submit', function (event) {
        event.preventDefault();
        if (messageInput.value) {
            ws.send(messageInput.value);
            messageInput.value = '';
        }
    });
</script>
</body>
</html>